<template>
  <div class="content" :class="show?'isHidden':''">
    <div class="item-warp" v-for="item in item.warp" :key="item.key">
      <div class="item-img" @click="toCase(item.alis)">
        <img :src="item.cover" height="180"/>
      </div>
      <div class="item-title">{{ item.title }}</div>
      <div class="item-spec">{{ item.spec }}</div>
    </div>

  </div>
  <Case :show.sync="show" @close="close" :alias="alias" v-if="show"/>
</template>
<script setup>
import Case from './case.vue'
import {reactive, ref, onMounted} from "vue";

const item = reactive({
  warp:[
    {
      key:1,
      title:'图片瀑布流效果',
      alis:'2011',
      spec:'简单写一个瀑布流效果',
      cover: 'https://p.qlogo.cn/hy_personal/3e28f14aa05168424344559ea2a9047e49c8c12f687ad862169bf05a21302918/0.png',
      time:''
    },
    {
      key:2,
      title:'js拖拽功能示例',
      alis:'2012',
      spec:'简单实现拖拽功能',
      cover:'https://p.qlogo.cn/hy_personal/3e28f14aa05168424344559ea2a9047e88be9fade5143530391d20f7c51870e4/0.png',
      time:''
    },

  ]
})
let show = ref(false)
let alias = ref()
//案例详情
const toCase = (alis)=>{
  if (alis){
    alias.value = alis
    show.value = true
  }

}
const close = ()=>{
  show.value = false
}
</script>

<style scoped lang="less">
.content {
  width: 100%;
  padding:40px 15vw 0;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  grid-gap: 40px;
  gap: 40px;
}
.isHidden{
  height: calc(100vh - 70px);
  overflow: hidden;
}
.item-warp{
  height: 250px;
  margin: 10px 0;
  //border: 1px red solid;
}
.item-img{
  height: 180px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  border: 1px #bdbdbd solid;
  img{
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    &:hover{
      transform: scale(1.1);
    }
  }
}
.item-title{
  font-size: 16px;
  font-weight: bold;
  margin: 5px 0;
}
.item-spec{
  font-size: 14px;
  font-family: sans-serif;
  color: @--secondary;
}
</style>